<template>
  <el-container class="h-100 p-3" id="countylevel-proving">
    <el-main class="p-0">
      <img style="height:161px;position:absolute;z-index:10;margin-left:10px;margin-top:10px;" src="static/mapTheme.jpg">
      <InitMap ref="map" height="100%" backgroundColor="white" @getChoiceGraphics="gMouseMover" />
      <div class="areaInfoBox" :style="divclass">
        <div style="width:100%;border-bottom:1px solid">
          {{currentArea.name}}
          <i class="el-icon-circle-close" style="float:right;margin-right:10px;cursor:pointer"
            @click="closeInfo"></i>
        </div>
        <div style="width:100%;height:100%;margin-top:10px">
          <div>
            <div style="float:left;width:80px;margin-left:3%;text-align:center">
              <span>{{currentArea.All}}</span>
              <br>
              <span>总数</span>
            </div>
            <div style="float:left;width:80px;margin-left:3%;text-align:center">
              <span>{{currentArea.WSB}}</span>
              <br>
              <span>县级未上报</span>
            </div>
            <div style="float:left;width:80px;margin-left:3%;text-align:center">
              <span>{{currentArea.DSH}}</span>
              <br>
              <span>待审核</span>
            </div>
            <div style="float:left;width:80px;margin-left:3%;text-align:center">
              <span>{{currentArea.YTG}}</span>
              <br>
              <span>已通过</span>
            </div>
            <div style="float:left;width:80px;margin-left:3%;text-align:center">
              <span>{{currentArea.WTG}}</span>
              <br>
              <span>未通过</span>
            </div>
            <div style="float:left;width:80px;margin-left:3%;text-align:center">
              <span>{{currentArea.YSB}}</span>
              <br>
              <span>市级已上报</span>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <el-aside width="500px" class="ml-3 text-center d-flex flex-column">
      <el-select class="w-100" v-model="selectArea" placeholder="请选择" @change="cityChange">
        <el-option v-for="item in cityOptions" :key="item.cityId" :label="item.cityName" :value="item.cityId"></el-option>
      </el-select>
      <el-table :data="tableData" border height="250" class="mt-2">
        <el-table-column prop="name" label="地市/区县" align="center"></el-table-column>
        <el-table-column prop="total" label="图斑总数" align="center"></el-table-column>
        <el-table-column prop="progress" label="举证进度" align="center"></el-table-column>
      </el-table>
      <el-main class="bg-white span mt-2 px-5">
        <div class="row text-muted my-4" v-for="(item, index) in tableData" :key="index">
          <div class="w-10">
            <span class="font-weight-bold">{{item.name}}</span>
          </div>
          <div class="col-sm pt-1">
            <el-progress :text-inside="true" :stroke-width="18" :percentage="getPercentage(item.areaYjz, item.total)"
              status="success"></el-progress>
          </div>
          <div style="width: 130px;" class="text-right">
            <span class="font-weight-bold">
              <span class="text-success">{{item.areaYjz}}</span>
              /{{item.total}}
            </span>
          </div>
        </div>
      </el-main>
      <!-- <el-card style="height:35%;margin-top:20px;">
        <div v-for="item in statisticTypes" :key="item.status" class="text item">
          <img :src="item.src" style="float:left;margin-left:10px">
          <span style="float:left;margin-left:5px">{{item.name}}</span>
          <span>{{item.count}}</span>
        </div>
      </el-card>-->
    </el-aside>
  </el-container>
</template>
<script>
import axios from "axios";
import InitMap from "../map/InitMap";

const proviceName = "陕西省";
const proviceId = "610000";
const statusCount = 5;
export default {
  name: "countylevelproving",
  title: "县级外业举证统计",
  components: { InitMap },
  data() {
    return {
      cityOptions: [],
      selectArea: null,
      tableData: null,
      statisticTypes: [],
      provinceId: "",
      divclass: {},
      currentArea: {
        All: 0,
        WSB: 0,
        DSH: 0,
        YTG: 0,
        YSB: 0,
        WTG: 0,
        name: ""
      }
    };
  },
  methods: {
    cityChange() {
      if (this.selectArea == proviceId) {
        this.initStatisticTypes("");
        this.getData("", proviceId);
      } else {
        this.initStatisticTypes(this.selectArea);
        this.getData(this.selectArea, proviceId);
      }
    },
    getCityMap(name, scal, data) {
      let url = this.$api.getRegion + "?name=" + name;
      let lables = [];
      axios.get(url).then(res => {
        if (res.data.code === "200") {
          this.$refs.map.removeGraphics();
          // 一下加0.4，2.2为手动试验出来的，不准确可以自己调
          let centerPoinit = this.$commonUtils.provinceCenter;
          let colors = [
            "#10C4E5", // 安康
            "#3398DC", // 汉中
            "#10C4E5", // 榆林
            "#3398DC", // 渭南
            "#3398DC", // 延安市
            "#5D9649", // 宝鸡
            "#3398DC", // 咸阳
            "#E7A23D", // 西安
            "#10C4E5", // 铜川
            "#5D9649", // 商洛
            // 一下为延申,防止出现数组下标溢出
            "#10C4E5",
            "#3398DC",
            "#10C4E5",
            "#3398DC"
          ];

          let drawComplate = 0;
          res.data.data[0].child.forEach((element, i) => {
            let paths = [];

            lables.push({
              point: [element.lnt, element.lat],
              name: element.name
            });

            element.points.forEach(el => {
              let lngLats = el.region.split(",");
              let crings = [];
              lngLats.forEach(ll => {
                let lngLat = ll.split(" ");
                crings.push([lngLat[0], lngLat[1]]);
              });
              paths.push(crings);
            });
            let value = 0;
            data.forEach(d => {
              if (d.name == element.name) {
                let total = d.total == 0 ? 1 : d.total;
                value = d.areaYjz / total;
              }
            });
            let cor = this.getColor(value);
            let eAtt = {
              cityId: element.cityCode.substring(3, element.cityCode.length),
              cityName: element.name
            };
            this.$refs.map
              .addMultiplePolygon(paths, cor, "white", eAtt)
              .then(status2 => {
                if (status2) {
                  drawComplate++;
                  if (drawComplate == lables.length) {
                    this.$refs.map.mapCenterAt(centerPoinit, 8, scal);
                  }
                }
              });
          });
        } else {
          this.$codeError(res);
        }
      });
    },
    getColor(value) {
      let colors = [
        [140, 46, 99],
        [236, 46, 245],
        [40, 46, 225],
        [116, 190, 249],
        [88, 192, 97]
      ];
      if (0 <= value && value < 0.2) {
        return colors[0];
      } else if (0.2 <= value && value < 0.4) {
        return colors[1];
      } else if (0.4 <= value && value < 0.6) {
        return colors[2];
      } else if (0.6 <= value && value < 0.8) {
        return colors[3];
      } else if (0.8 <= value && value < 1) {
        return colors[4];
      } else {
        return colors[4];
      }
    },
    gMouseMover(e) {
      if (e == undefined || e.selectGraphics == undefined) {
        this.divclass = {
          display: "none"
        };
        return;
      }
      e.selectGraphics.forEach(item => {
        let attributes = item.graphic.attributes;
        if (
          attributes != undefined &&
          attributes.cityId != undefined &&
          attributes.cityId != ""
        ) {
          let cityId = attributes.cityId;
          let _this = this;
          axios
            .get(
              this.$paramsConnect(this.$api.getSpotStatistic, {
                provinceId: "",
                cityId: cityId,
                areaId: ""
              })
            )
            .then(res => {
              if (res.data.code === "200") {
                for (var i = 0; i < res.data.data.length; i++) {
                  var data = res.data.data[i];
                  _this.currentArea.name = attributes.cityName;
                  switch (data.status) {
                    case 0:
                      _this.currentArea.All = data.num;
                      break;
                    case 1:
                      _this.currentArea.WSB = data.num;
                      break;
                    case 2:
                      _this.currentArea.DSH = data.num;
                      break;
                    case 3:
                      _this.currentArea.YTG = data.num;
                      break;
                    case 4:
                      _this.currentArea.WTG = data.num;
                      break;
                    case 5:
                      _this.currentArea.YSB = data.num;
                      break;
                  }

                  _this.divclass = {
                    display: "inline",
                    top: e.y + "px",
                    left: e.x + "px"
                  };
                }
              } else {
                this.$codeError(res);
              }
            })
            .catch(error => {
              this.$catchError(error);
            });
        }
      });
    },
    getData(cityId, provinceId) {
      let surl = "";
      if (cityId == "") {
        surl =
          this.$api.getSpotProgressStatistical + "?provinceId=" + provinceId;
      } else {
        surl =
          this.$api.getSpotProgressStatistical +
          "?provinceId=" +
          provinceId +
          "&cityId=" +
          cityId;
      }

      axios
        .get(surl)
        .then(res => {
          if (res.data.code === "200") {
            res.data.data.forEach(item => {
              item.progress =
                item.total == 0
                  ? "0%"
                  : Math.ceil((item.areaYjz / item.total) * 100) + "%";
            });
            this.tableData = res.data.data;
            if (cityId == "") {
              this.getCityMap(proviceName, 4000000, this.tableData);
            } else {
              let selectName = "";
              this.cityOptions.forEach(item => {
                if (item.cityId == this.selectArea) {
                  selectName = item.cityName;
                }
              });
              this.getCityMap(
                proviceName + selectName,
                5000000,
                this.tableData
              );
            }
          } else {
            this.$codeError(res);
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    },
    initStatisticTypes(cityId) {
      let url = this.$api.getSpotStatistic;
      if (cityId != "") {
        url = this.$api.getSpotStatistic + "?cityId=" + cityId;
      }
      axios
        .get(url)
        .then(res => {
          if (res.data.code === "200") {
            let result = res.data;
            this.statisticTypes = [];
            for (var i = 0; i < statusCount; i++) {
              var name = "";
              name = this.$commonUtils.cityStatusToStr(result.data[i].status);
              let src = this.statusToSrc(result.data[i].status);
              this.statisticTypes.push({
                src: src,
                status: result.data[i].status,
                name: name,
                count: result.data[i].num
              });
            }
          } else {
            this.$codeError(res);
          }
        })
        .catch(error => {
          this.$catchError(error);
        });
    },
    statusToSrc(status) {
      var result = "";
      switch (status) {
        case 0:
          result = "static/tdsh.png";
          break;
        case 1:
          result = "static/twjz.png";
          break;
        case 2:
          result = "static/tdsh.png";
          break;
        case 4:
          result = "static/tytg.png";
          break;
        case 3:
          result = "static/twtg.png";
          break;
        case 5:
          result = "static/tysb.png";
          break;
      }
      return result;
    },
    closeInfo() {
      this.divclass = {
        display: "none"
      };
    },
    getPercentage(sch, total) {
      let result = total ? Math.ceil((sch / total) * 100) : 0;
      return result || 0;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.map.loadWebTileMap().then(status => {
        if (status) {
          let _this = this;
          this.$refs.map.creatGraphicsLayer().then(status1 => {
            if (!status1) {
              return;
            }
            //this.getCityMap(proviceName, 4000000);
            this.$refs.map.getChoiceGraphics();
            axios.get(this.$api.getCityInfo).then(res => {
              if (res.data.code === "200") {
                var result = res.data.data;
                this.cityOptions = [];
                this.cityOptions.push({
                  cityId: result.provinceId,
                  cityName: result.provinceName
                });
                res.data.data.citys.forEach(item => {
                  this.cityOptions.push({
                    cityId: item.cityId,
                    cityName: item.cityName
                  });
                });
                this.provinceId = result.provinceId;
                this.selectArea = this.cityOptions[0].cityId;
                this.getData("", this.provinceId);
                this.initStatisticTypes("");
              }
            });
          });
        }
      });
    });
  }
};
</script>
<style lang='scss'>
#countylevel-proving {
  .text {
    font-size: 16px;
    font-weight: bold;
    text-align: right;
  }

  .item {
    margin-bottom: 28px;
    width: 100%;
  }

  .areaInfoBox {
    position: absolute;
    z-index: 1000;
    display: none;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    padding: 14px;
    height: 100px;
    width: 630px;
    bottom: 15px;
  }
}
</style>